<template >
  <div>
    <span class="sp" v-copy="val">复制</span>
    <avue-crud
      v-model="form"
      :option="option"
      @row-save="rowSave"
      v-model:page="page"
      v-model:search="search"
      @row-update="rowUpdate"
      @row-del="rowDel"
      :data="dataList"
      @selection-change="selectionChange"
      @search-change="searchChange"
      @on-load="onLoad"
    >
      <template #menu-left="{}">
        <div class="block">
          <span>创建时间</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          />
        </div>
      </template>
      <template #status="scope">
        <el-switch v-model="scope.row.status"> </el-switch>
      </template>
    </avue-crud>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "@/utils/axios";
const option = ref(null);
const data = ref(null);
const form = ref({});
const value1 = ref([]);
const value = ref("全部");
const dataList = ref(null);
const val = ref("复制123456765432")

onMounted(() => {
  
  // 请求数据
  axios.get("/getList").then((res) => {
    console.log(res);
    dataList.value = res.data.data.slice(0, 10);
    page.value.total = res.data.data.length;
    data.value = res.data.data;
  });
});

// 分页配置
const page = ref({
  total: 50,
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30],
});
option.value = {
  index: false,
  column: [
    {
      label: "ID",
      prop: "id",
    },
    {
      label: "车次/类型",
      prop: "type",
      search: true,
      searchValue: "",
    },
    {
      label: "车长",
      prop: "name",
    },
    {
      label: "总座位数",
      prop: "all",
    },
    {
      label: "车厢数量",
      prop: "number",
    },
    {
      label: "限乘人数",
      prop: "limit",
    },
    {
      label: "创建时间",
      prop: `time`,
    },
    {
      label: "状态",
      prop: "status",
      type: "switch",
      slot: true,
      dicData: [
        {
          label: "废除",
          value: "0",
        },
        {
          label: "启用",
          value: "1",
        },
      ],
    },
  ],
};
data.value = [];

// 搜索
const searchChange = (val) => {
  console.log(val.type);
  const arr = [];

  data.value.filter((item) => {
    if (item.type.includes(val.type)) {
      return arr.push(item);
    }
  });
  dataList.value = arr;
};

// 分页
const onLoad = (page) => {
  console.log(11);
  page.total = data.value.length;
  if (page.currentPage === 1) {
    dataList.value = data.value.slice(
      (page.currentPage - 1) * 10,
      page.currentPage * 10
    );
  } else if (page.currentPage === 2) {
    dataList.value = data.value.slice(
      (page.currentPage - 1) * 10,
      page.currentPage * 10
    );
  }
};

function rowSave(row, done, loading) {
  console.log(row, done);
  done(row);
}
function rowDel(row, index, done) {
  done(row);
}
function rowUpdate(row, index, done, loading) {
  done(row);
}
</script>

<style scoped>
.block {
  width: 450px;
}

.avue-crud__left {
  display: flex;
  justify-content: space-around;
}
.type {
  width: 150px;
}

.sp{
  cursor: pointer;
}
</style>
